<template>
    <div style="border: 1px solid #ccc">
        <Editor style="min-height: 400px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="handleCreated" @onChange="updateHtml" />
    </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css 
import { onBeforeUnmount, ref, shallowRef, onMounted, watch, defineProps, readonly } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const emit = defineEmits(['change'])
const mode = 'simple' // 或 'simple'  'default'
const props = defineProps({
    html: {
        type: String,
        default: ''
    }
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref(props.html)
watch(props, (newValue, oldValue) => {
    valueHtml.value = newValue.html
})
// 当更新内容时
const updateHtml = (val) => {
    emit('change', valueHtml.value)
    // console.log(valueHtml.value)
}
const editorConfig = {
    readOnly:true // 只读
}


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

onMounted(() => {
    editorRef.value=props.html
})
</script>

<style scoped lang="scss">

</style>